<template>
  <popup
    ref="popupRef"
    title="条件字段"
    :async="true"
    width="1350px"
    :clickModalClose="false"
    @confirm="handleConfirm"
  >
    <!-- <el-divider content-position="left">申请单</el-divider> -->
    <el-checkbox v-model="orderListAll" @change="handleCheckAllChangeOrder">
      全选
    </el-checkbox>
    <el-checkbox-group
      v-model="orderListCheck"
      @change="handleCheckedPayChangeOrder"
    >
      <el-row>
        <el-col :span="6" v-for="item in orderList" :key="item.id">
          <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
        </el-col>
      </el-row>
    </el-checkbox-group>

    <!-- <el-divider content-position="left">付款单</el-divider> -->
    <el-checkbox v-model="payListAll" @change="handleCheckAllChangePay"
      >全选
    </el-checkbox>
    <el-checkbox-group v-model="payListCheck" @change="handleCheckedPayChange">
      <el-row>
        <el-col :span="6" v-for="item in payList" :key="item.id">
          <el-checkbox :label="item.value">{{ item.name }}</el-checkbox>
        </el-col>
      </el-row>
    </el-checkbox-group>
  </popup>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { listAll, reject } from "@/api/financial/lists";
import Popup from "@/components/popup/index.vue";
import { ElMessage } from "element-plus";
import type { CheckboxValueType } from "element-plus";
const emits = defineEmits(["confirm"]);
const popupRef = ref();
// 申请单全选
const orderListCheck = ref<string[]>([]);
const orderListAll = ref(false);
const handleCheckAllChangeOrder = (val: CheckboxValueType) => {
  orderListCheck.value = val ? orderList.value.map(x => x.value) : [];
};
const handleCheckedPayChangeOrder = (v: CheckboxValueType[]) => {
  orderListAll.value = v.length > 0 && v.length === orderList.value.length;
};
// 付款单全选
const payListCheck = ref<string[]>([]);
const payListAll = ref(false);
const handleCheckAllChangePay = (val: CheckboxValueType) => {
  payListCheck.value = val ? payList.value.map(x => x.value) : [];
};
const handleCheckedPayChange = (v: CheckboxValueType[]) => {
  payListAll.value = v.length > 0 && v.length === payList.value.length;
};
// 确认驳回
const handleConfirm = () => {
  if (orderListCheck.value.length == 0 && payListCheck.value.length == 0) {
    ElMessage.warning("请选择条件字段");
  } else {
    fetchReject([...orderListCheck.value, ...payListCheck.value]);
  }
};
const fetchReject = async (fields: string[]) => {
  await reject({ order_id: order_id.value, fields });
  popupRef.value.close();
  emits("confirm");
};
// 获取申请单 付款单的列表
interface List {
  id: string;
  value: string;
  name: string;
}
const orderList = ref<List[]>([]); // 申请单
const payList = ref<List[]>([]); // 付款单
const fetchDictDataLists = async () => {
  const res = await listAll({ page_no: 1, page_size: 100 });
  orderList.value = res.dg_finance_order;
  payList.value = res.bills_of_payment;
};
// 打开弹窗 初始化数据
const order_id = ref();
const open = async (id: string) => {
  order_id.value = id;
  await fetchDictDataLists();
  popupRef.value.open();
};
defineExpose({ open });
</script>

<style scoped lang="scss"></style>
